<template>
  <div class="trend-page">
    <template v-if="Object.keys(data).length>0">
      <!-- 图表 -->
      <div class="left">
        <div class="date-box">
          <!-- <span class="vbtn-toggle">
            <el-button type="primary" class="elbtn elbtn-left" :class="{'elbtn-active':tabChartActive===0}" @click="tabChartActive=0">
              <i class="iconfont icon-zhexiantu"></i>
            </el-button>
            <el-button type="primary" class="elbtn elbtn-right" :class="{'elbtn-active':tabChartActive===1}" @click="tabChartActive=1">
              <i class="iconfont icon-situation"></i>
            </el-button>
          </span> -->
        </div>
        <div style="position:relative;width:100%;height:400px;padding-bottom: 30px">
          <div id="chartAchievementOne" :class="{'tab-active': tabChartActive===0}"></div>
          <!-- <div id="chartAchievementTwo" :class="{'tab-active': tabChartActive===1}"></div> -->
        </div>
      </div>
      <!-- 列表 -->
      <div class="right">
        <h3>{{keyAsString[currentKey]&&keyAsString[currentKey].name}}：{{data[currentKey]}}{{keyAsString[currentKey]&&keyAsString[currentKey].unit}}</h3>
        <ul class="eltable">
          <!-- 专利 -->
          <template v-if="currentKey==='patent'">
            <li class="theader">
              <p class="w100">申请日</p>
              <p class="w100">公开日</p>
              <p>名称</p>
              <p class="w140">专利号</p>
            </li>
            <li v-for="(item, index) in listData" :key="index" class="tbody">
              <p class="w100">{{item.ad}}</p>
              <p class="w100">{{item.isd}}</p>
              <p :title="item.title">{{item.title}}</p>
              <p class="w140">{{item.pn}}</p>
            </li>
          </template>
          <!-- 论文 -->
          <template v-if="currentKey==='paper'">
            <li class="theader">
              <p>标题</p>
              <p>机构</p>
            </li>
            <li v-for="(item, index) in listData" :key="index" class="tbody">
              <p :title="item.title">{{item.title}}</p>
              <p>{{item.organ&&item.organ.join('，')}}</p>
            </li>
          </template>
          <!-- 成果 -->
          <template v-if="currentKey==='chengguo'">
            <li class="theader">
              <p>标题</p>
              <p>机构</p>
            </li>
            <li v-for="(item, index) in listData" :key="index" class="tbody">
              <p :title="item.achievement_name">{{item.achievement_name}}</p>
              <p>{{item.achievement_institution}}</p>
            </li>
          </template>
          <!-- 标准 -->
          <template v-if="currentKey==='biaozhun'">
            <li class="theader">
              <p>标题</p>
              <p class="w100">类型</p>
              <p class="w100">标准性质</p>
              <p class="w100">状态</p>
              <p class="w140">发布时间</p>
            </li>
            <li v-for="(item, index) in listData" :key="index" class="tbody">
              <p :title="item.title">{{item.title}}</p>
              <p class="w100">{{item.type}}</p>
              <p class="w100">{{item.std_nature || '-'}}</p>
              <p class="w100">{{item.status}}</p>
              <p class="w140">{{item.issue_date}}</p>
            </li>
          </template>
        </ul>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="ips"
          :current-page.sync="ipi"
          @current-change="getCurrentPage"
          class="elpagination">
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <p class="empty-text">{{emptyText}}</p>
    </template>
  </div>
</template>

<script>
import axios from 'axios'
import Ecolors from '@/utils/chartsColors.js'
import {resize} from '@/utils/utils'
export default {
  mixins: [resize],
  data() {
    return {
      info: {},
      data: {},
      tabChartActive: 0,
      chartAchievementOne: '',
      chartAchievementTwo: '',
      // 列表
      currentKey: '',
      keyAsString: {
        biaozhun: {
          name: '标准',
          unit: '个'
        },
        patent: {
          name: '专利',
          unit: '件'
        },
        paper: {
          name: '论文',
          unit: '篇'
        },
        chengguo: {
          name: '成果',
          unit: '个'
        }
      },
      listData: [],
      ipi: 1,
      ips: 6,
      total: 0,
      emptyText: '数据加载中...',
      cancel: null
    }
  },
  methods: {
    init() {
      this.info = {
        name: this.$route.query.name,
        key: this.$route.query.key,
        companyName: this.$route.query.companyName
      }
      this.getData()
    },
    // 科研成果概况
    getData() {
      let ths = this
      if (this.cancel) {
        this.cancel()
      }
      this.emptyText = '数据加载中...'
      this.$get(this.$Url.team.getPersonOverviewByPid, {
        pid: this.info.key
      }, new axios.CancelToken(function executor(c) {
        ths.cancel = c
      }))
      .then(res => {
        let data = res.data
        this.data = data
        if (Object.values(data).filter(v => v !== 0).length > 0) {
          this.$nextTick(() => {
            if (!this.chartAchievementOne) {
              this.chartAchievementOne = this.$echarts.init(document.getElementById("chartAchievementOne"))
              // this.chartAchievementTwo = this.$echarts.init(document.getElementById("chartAchievementTwo"))

              this.chartAchievementOne.on('click', (params) => {
                this.ipi = 1
                this.currentKey = params.data && params.data.label
                this.getListData()
              })
              // this.chartAchievementTwo.on('click', (params) => {
              //   this.ipi = 1
              //   this.getListData()
              // })
            }

            
            let newData = [
              {name: '专利'},
              {name: '论文'},
              {name: '成果'},
              {name: '标准'},
            ]
            let keys = Object.keys(this.data)
            newData.forEach(v => {
              let arr = keys.filter(b => this.keyAsString[b] && this.keyAsString[b].name === v.name)
              if (arr.length > 0) {
                v.label = arr[0]
                v.value = this.data[arr[0]] != 0 ? this.data[arr[0]] : '-'
              }
            })
            this.currentKey = newData[0] && newData[0].label
            
            // 科研成果概况列表
            this.getListData()
            
            this.renderPieChart(newData)
          })
          
        } else {
          this.emptyText = '暂无数据'
        }
      }).catch(err => {})
    },
    // 科研成果概况列表
    getListData() {
      if (this.currentKey === 'patent') { // 专利
        this.$post(this.$Url.team.search2, {
          musts: {
            date_sort: '1',
            'in2id.id': this.info.key
          },
          ipi: this.ipi,
          ips: this.ips,
          sort: [
            {
              isd: 'desc'
            }
          ],
          rangArr: [
            {
              field: 'ad',
            }
          ]
        }).then(res => {
          this.listData = res.data.result
          this.total = res.data.page.totalRow || 0
        }).catch(err => {})
      } else if (this.currentKey === 'paper') { // 论文
        this.$post(this.$Url.team.expertPaperPageQuery, {
          ipi: this.ipi,
          ips: this.ips,
          pid: this.info.key
        }).then(res => {
          this.listData = res.data.result
          this.total = res.data.total || 0
        }).catch(err => {})
      } else if (this.currentKey === 'chengguo') { // 成果
        this.$post(this.$Url.team.expertChengguoPageQuery, {
          ipi: this.ipi,
          ips: this.ips,
          pid: this.info.key
        }).then(res => {
          this.listData = res.data.result
          this.total = res.data.total || 0
        }).catch(err => {})
      } else if (this.currentKey === 'biaozhun') { // 标准
        this.$post(this.$Url.team.expertBiaozhunPageQuery, {
          ipi: this.ipi,
          ips: this.ips,
          pid: this.info.key
        }).then(res => {
          this.listData = res.data.result
          this.total = res.data.total || 0
        }).catch(err => {})
      }
    },
    renderPieChart(data) {
      let seriesData = []
      let obj = {
        type: 'pie',
        radius: ['36%', '60%'],
        center: ['50%', '50%'],
        roseType: false,
        label: {
          show: true,
          formatter: (param) => {
            let data = param.data
            let str = `${data.name}(${data.value})`
            return str
          }
        },
        labelLine: {
          show: true
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff',
          borderType: 'solid',
          borderRadius: 6
        },
        // minShowLabelAngle: 4,
        data
      }
      seriesData.push(obj)

      // 图例
      let legend = {
        type: 'plain',
        show: true,
        left: '2%',
        right: '3%',
        bottom: '3%',
        icon: 'circle',
        textStyle: {
          color: '#6b6c7e'
        },
        formatter: (name) => {
          let obj = data.find(v => v.name === name)
          return `${name}(${obj.value == '-' ? 0 : obj.value})`
        }
      }
      // 提示框
      let tooltip = {
        confine: true,
        show: true,
        // trigger: 'item',
        backgroundColor: "#fff",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        borderRadius: 0,
        padding: 5,
        textStyle: {
          fontWeight: 'normal',
          color: "#000",
        },
        // formatter: (params) => {
        //   let param = params[0]
        //   let value = param.data.find(v => v !== param.name && v !== '-')
        //   let index = param.data.findIndex(v => v !== param.name && v !== '-')
        //   return `${params[index-1].marker}${param.name}：${value}`
        // }
      }
      let option = {
        // 提示框
        tooltip,
        // 图例
        legend,
        // 背景色
        backgroundColor: '#fff',
        series: seriesData
      }

      this.chartAchievementOne.setOption(option, true)

    },
    getCurrentPage(val) {
      this.ipi = val
      this.getListData()
    },
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    if (this.chartAchievementOne) {
      this.chartAchievementOne.dispose()
    }
    if (this.chartAchievementTwo) {
      this.chartAchievementTwo.dispose()
    }
    if (this.cancel) {
      this.cancel()
    }
  }
}
</script>

<style lang="scss" scoped>
.trend-page {
  position: relative;
  display: flex;
  .left {
    flex: .5;
    box-sizing: border-box;
    .date-box {
      position: relative;
      margin-top: 10px;
      .tit {
        display: inline-block;
        // width: 75px;
        margin-right: 10px;
        font-size: 14px;
        color: #2d3a86;
      }
      .search-time {
        display: inline-flex;
        align-items: center;
        .elpicker {
          width: 150px;
        }
        .split {
          display: inline-block;
          padding: 0 5px;
        }
      }
    }
    .vbtn-toggle {
      float: right;
      margin-right: 20px;
      .elbtn {
        width: 40px;
        height: 36px;
        padding: 0;
        border: 0;
        color: #b8b7ee;
        background-color: #e9e9fc;
        &.elbtn-left {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        &.elbtn-right {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          margin-left: 2px !important;
        }
        &.elbtn-active {
          color: #fff !important;
          background-color: $mainColor !important;
          &:hover, &:active {
            color: #fff;
            background-color: $mainColor !important;
          }
        }
      }
    }
    #chartAchievementOne, #chartAchievementTwo {
      position: absolute;
      top: 0;
      left: -9999px;
      width: 100%;
      height: 370px;
    }
    .tab-active {
      left: 0 !important;
    }
  }
  .right {
    flex: .5;
    float: none !important;
    min-width: 0;
    h3 {
      padding-bottom:12px;
      border-bottom:1px solid #b7b6eb;
      font-size: 14px;
      color: $mainColor;
    }
    .eltable {
      width: 100%;
      min-height: 280px;
      padding-left: 0;
      li {
        position: relative;
        display: flex;
        text-align: left;
        font-size: 14px;
        &.theader {
          line-height: 50px;
          color: #2d3a86;
        }
        &.tbody {
          &:hover {
            p {
              font-weight: bold;
              color: $mainColor;
            }
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
          }
          p {
            line-height: 46px;
            color: #7d90ae;
          }
        }
        p {
          flex: 1;
          padding: 0 13px;
          margin-bottom: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &.w100 {
            flex: initial;
            width: 124px;
          }
          &.w140 {
            flex: initial;
            width: 140px;
          }
        }
        
      }
    }
    .elpagination {
      margin-top: 30px;
      margin-bottom: 30px;
      text-align: right;
    }
  }
}
.empty-text {
  padding: 16px;
}
</style>